<template>
  <div class="userinfo">
    <div class="container">
      <div class="wrap">
        <img class="avatar" :src="userinfo.avatar" />
        <div class="username">{{ userinfo.username }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getHomeDataApi } from "@/api/center";
import { reactive, onActivated } from "vue";

// - data
const userinfo = reactive({
  username: "毋婉团长",
  avatar:
    "https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png",
});

// - request
async function getUserInfo() {
  try {
    const res = await getHomeDataApi();
    if (res.code == 0) {
      // console.log(res.result)
      const { avatar, nickname } = res.result.data;

      avatar && (userinfo.avatar = avatar);
      nickname && (userinfo.username = nickname);
    } else {
      userinfo.avatar =
        "https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png";
    }
  } catch (error) {
    userinfo.avatar =
      "https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png";
  }
}

// - lifecycle
onActivated(() => {
  getUserInfo();
});
</script>

<style lang="scss" scoped>
.userinfo {
  background: #ffffff;
  height: 343px;

  .container {
    width: 100%;
    height: 100%;
    background: url("../../../../assets/addstart/userinfo/userinfo_bg.png")
      no-repeat center center / 100% 100%;
    overflow: auto;

    .wrap {
      display: flex;
      align-items: center;
      margin: 45px 0 0 35px;

      .avatar {
        display: block;
        width: 120px;
        height: 120px;
        box-shadow: 0px 6px 10px 0px rgba(204, 230, 201, 0.33);
        border: 5px solid #ffffff;
        border-radius: 50%;
      }

      .username {
        font-size: 36px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 50px;
        margin-left: 23px;
      }
    }
  }
}
</style>
